<template>
	<view v-if="obj" class="relateBanner">
		<view class="head">
			<text class="head-name">{{obj.name}}</text>
			<text class="head-more">more</text>
		</view>
		<view class="banner">
			<view class="" v-for="(item,index) in obj.list" :key="index" class="banner-item" @click="jumpDetails(item.postid)">
				<cover-image style="width: 43.5vw; height: 200rpx;display: block;"  mode="widthFix"
					:src="item.image"></cover-image>
				<view class="item-info">
					<text class="info-time">{{countTime(item.duration)}}</text>
					<view class="info-title">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"RelateBanner",
		props:{
			obj:Object,
		},
		data() {
			return {
				
			};
		},
		methods:{
			countTime(dur) {
				let a = parseInt(dur / 60);
				let b = parseInt(dur % 60);
				if (a < 10) {
					a = "0" + a;
				}
				if (b < 10) {
					b = "0" + b;
				}
				return a + "\'" + b + "\"";
			},
			jumpDetails(id){
				uni.showLoading({
					title:'加载中'
				});
				uni.request({
					url:`https://apis.netstart.cn/vmovier/post/view?postid=${id}`,
					success: (res) => {
						this.$store.commit('updateDetails', {
							details: res.data.data,
						});
						uni.navigateTo({
							url: `../../pages/details/details?postid=${id}`,
							complete: () => {
								uni.hideLoading();
							}
						})
					}
					
				})
			}
		}
	}
</script>

<style lang="less">
.relateBanner{
	padding: 3vw;
	.head{
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		.head-name{
			font-weight: bold;
			font-size: 30rpx;
		}
		.head-more{
			color: #888;
		}
	}
	.banner{
		display: flex;
		overflow-x: auto;
		&::-webkit-scrollbar{
			width: 0;
			height: 0;
		}
		.banner-item{
			margin-right: 3vw;
			position: relative;
			&:last-of-type{
				margin-right:0;
			}
			.item-info{
				position: absolute;
				bottom: 0;
				left: 0;
				color: white;
				padding: 2vw;
				.info-time{
					font-size: 24rpx;
				}
				.info-title{
					font-size: 26rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 40vw;
				}
			}
		}
	}
}
</style>
